<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    {load href="/static/js/layer/skin/default/layer.css" /}
    <style>
        tr,th{
            text-align: center;
        }
        th{
            color: #797979;
        }
        #keyword{
            width: 300px;
        }
        .breadcrumb{
            background-color: #515151;
        }
        .breadcrumb span{
            color: #ffffff;
        }
        .ml15{
            margin-left: 15px;
        }
        .c2{
            cursor: pointer;
            text-align: center;
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 15px;
            margin-right: 10px;
        }
        .mytab{
            font-size:15px;
            border-bottom: 1px solid #C8C8C8;
            margin-bottom: 20px;
        }

        .mytab .active{
            border-bottom: 4px solid #505050;
            color: #ff5800;
        }
    </style>
</head>
<body>
<div style="padding-left: 20px;padding-right: 20px;">

    <ol class="breadcrumb">
        <li><span href="#">当前位置</span></li>
        <li><span href="#">全部应用</span></li>
        <li class="active"><span>优惠券</span></li>
    </ol>
    <div class="container-fluid">
        <div class="mytab">
            <span class="c2 active">优惠券列表</span>
            <span class="c2">核销记录</span>
            <span class="c2">领券记录</span>
            <span class="c2">新建优惠券</span>
            <span class="c2">配置公众号</span>
        </div>
        <div class="container-fluid" style="margin-top: 20px;margin-bottom: 20px;">
            <div class="form-inline">
                <select class="form-control">
                    <option>全部类型</option>
                </select>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="优惠券名称"/>
                </div>
                <button class="btn btn-primary search">搜索</button>
            </div>
        </div>
        <table class="table">
            <thead>
            <tr>
                <th>优惠券名称</th><th>类型</th><th>已领取</th><th>剩余数量</th><th>有效期</th><th>状态</th><th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td></td><td><button class="btn btn-info btn-sm edit">编辑</button><button class="btn btn-info btn-sm ml15 offshelves">下架</button><button class="btn btn-info btn-sm ml15">推广</button></td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td></td><td><button class="btn btn-info btn-sm edit">编辑</button><button class="btn btn-info btn-sm ml15 offshelves">下架</button><button class="btn btn-info btn-sm ml15">推广</button></td></tr>
            <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td></td><td><button class="btn btn-info btn-sm edit">编辑</button><button class="btn btn-info btn-sm ml15 offshelves">下架</button><button class="btn btn-info btn-sm ml15">推广</button></td></tr>
            </tbody>
        </table>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{load href="/static/js/layer/layer.js" /}
<script>
    $(".offshelves").on("click",function () {
        layer.confirm('您是如何看待前端开发？', {
            btn: ['重要','奇葩'] //按钮
        }, function(){
            layer.msg('的确很重要', {icon: 1});
        }, function(){
            layer.msg('也可以这样', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    })

</script>
</body>
</html>